<template>
  <div>
    <hm-header>注册</hm-header>
    <hm-log></hm-log>
    <hm-input placeholder="用户名/手机号" :rule="/^1\d{4,10}$/" v-model="username" message="用户格式不对"></hm-input>
    <hm-input
      type="text"
      placeholder="昵称"
      v-model="nickname"
      :rule="/^[\u4e00-\u9fa5]{3,7}$/"
      message="用户的昵称必须是3-7位的中文"
    ></hm-input>
    <hm-input type="password" v-model="password" :rule="/^\d{3,12}$/" message="用户密码格式错误"></hm-input>
    <hm-button @click="click">注册</hm-button>
    <div class="go-login">
      已有账号？去
      <router-link class="link" to="/login">登录</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      nickname: "",
      password: ""
    };
  },
  methods: {
    click() {
      this.$axios({
        method: "post",
        url: "/register",
        data: {
          username: this.username,
          nickname: this.nickname,
          password: this.password
        }
      }).then(res => {
        if (res.data.statusCode === 200) {
          this.$toast.success(res.data.message);
          this.$router.push({
            name: "/login",
            params: { username: this.username, password: this.password }
          });
        } else {
          this.$toast.fail(res.data.message);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.go-login {
  padding: 0 30px;
  font-size: 12px;
  text-align: right;
  .link {
    color: orange;
  }
}
</style>
